<template>
  <view class="common">
    <!-- <view class="more">
      <text @click="onMore">加载更多</text>
    </view> -->
    <view v-for="item in commentList" :key="item">
      <CommentItem :comment="item"></CommentItem>
    </view>
    <view class="foot">
      <view class="foot-content">
        <view class="foot-inp">
          <u-textarea
            autoHeight
            v-model="content"
            placeholder="请输入留言内容"
            confirmType="发送"
            maxlength="300"
            @confirm="onSend"
          ></u-textarea>
        </view>
        <view class="foot-btn">
          <u-button type="primary" text="发送" @click="onSend"></u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import commentApi from '../../request/api/comment'
import CommentItem from '../../components/CommentItem'

export default {
  components: {
    CommentItem,
  },
  data() {
    return {
      // 对方用户id
      heId: '',
      content: '',
      commentList: [],
    }
  },
  onLoad(options) {
    this.heId = options.heId
    this.getHistory()
  },
  computed: {
    ...mapGetters('userInfo', ['user', 'isCommon', 'isLawyer', 'isSecretary']),
  },
  methods: {
    // 提交
    async onSend() {
      const params = {
        content: this.content,
      }
      if (this.isLawyer || this.isSecretary) {
        Object.assign(params, {
          leaderUserId: this.user.userId,
          userId: this.heId
        })
        // 给用户发消息
        var { data } = await commentApi.sendLeader(params)
      } else {
        Object.assign(params, {
          leaderUserId: this.heId,
          userId: this.user.userId
        })
        // 给领导发消息
        var { data } = await commentApi.sendUser(params)
      }
      this.commentList.push(data)
      this.content = ''
    },
    // 获取历史留言
    async getHistory() {
      const params = {}
      if (this.isLawyer || this.isSecretary) {
        params.userId = this.heId
        // 获取领导的历史留言
        var { data } = await commentApi.getLeaderHistory(params)
      } else {
        params.leaderUserId = this.heId
        // 获取用户的历史留言
        var { data } = await commentApi.getUserHistory(params)
      }
      this.commentList = data
    },
    // 加载更多
    onMore() {

    }
  }
}
</script>

<style scoped lang="scss">
.more {
  font-size: 32rpx;
  color: #6b7785;
  text-align: center;
  padding: 20rpx 0;
}
.common {
  padding-bottom: 80rpx;
}
.foot {
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: 0;  
  padding-bottom: constant(safe-area-inset-bottom);  
  padding-bottom: env(safe-area-inset-bottom);
  .foot-content {
    display: flex;
    align-items: flex-end;
    padding: 0 30rpx;
  }
  .foot-inp {
    flex-grow: 1;
  }
  .foot-btn {
    flex-shrink: 0;
    margin-left: 10rpx;
  }
}
</style>
